<template>
  <div class="content">
    <Crud :tbColumns="tbColumns" ref="crud" title="用户相关" :baseUrl="baseUrl" :refreshUrl="refreshUrl" @editChange="onEditChange">
      <template slot="formItems" slot-scope="{record}">
        <a-row :gutter="24">
          <a-col :span="12" v-if="isEdit">
            <a-form-item label="编号" v-bind="formItemLayout">
              <a-input-number :disabled="isEdit" placeholder="请输入编号" @change="(val)=>record['id'] = val" style="width:100%"
                v-decorator="['id', {initialValue: record.id, rules: [{ required: true, type: 'integer', message: '编号为整数'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="名称" v-bind="formItemLayout">
              <a-input placeholder="请输入名称" @change="(val)=>record['name'] = val.target.value"
                v-decorator="['name', {initialValue: record.name, rules: formRules.name}]" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="文件标识" v-bind="formItemLayout">
              <a-input-number placeholder="请输入文件标识" @change="(val)=>record['dataTag'] = val" style="width:100%"
                v-decorator="['dataTag', {initialValue: record.dataTag}]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="终端类型" v-bind="formItemLayout">
              <a-select style="width: 100%" showSearch placeholder="请选择终端类型"
                @change="(val)=>record.terminalType = terminalTypeList.find(v => v.id === val)"
                v-decorator="['terminalType', {initialValue: getValueOfObj(record.terminalType) , rules: formRules.terminalType}]">
                <a-select-option v-for="item in terminalTypeList" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="通讯协议" v-bind="formItemLayout">
              <a-select style="width: 100%" showSearch placeholder="请选择通讯协议"
                @change="(val)=>record.protocol = protocolTypeList.find(v => v.id === val)"
                v-decorator="['protocol', {initialValue: getValueOfObj(record.protocol) , rules: formRules.protocol}]">
                <a-select-option v-for="item in protocolTypeList" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="制造商" v-bind="formItemLayout">
              <a-select style="width: 100%" showSearch placeholder="请选择制造商" @change="(val)=>record.vendor = vendorTypeList.find(v => v.id === val)"
                v-decorator="['vendor', {initialValue: getValueOfObj(record.vendor) , rules: formRules.vendor}]">
                <a-select-option v-for="item in vendorTypeList" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="软件版本" v-bind="formItemLayout">
              <a-input placeholder="请输入名称" @change="(val)=>record['softVer'] = val.target.value"
                v-decorator="['softVer', {initialValue: record.softVer}]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="硬件版本" v-bind="formItemLayout">
              <a-input placeholder="请输入名称" @change="(val)=>record['hardVer'] = val.target.value"
                v-decorator="['hardVer', {initialValue: record.hardVer}]" />
            </a-form-item>
          </a-col>
        </a-row>

      </template>
    </Crud>
  </div>

</template>

<script>
import Crud from '@/components/container/Crud';
import CrudMixin from '@/components/container/CrudMixin.js';

export default {
  name: 'firmwareCrud',
  components: { Crud },
  mixins: [CrudMixin],

  data() {
    return {
      refreshUrl: 'region/{id}/children',
      baseUrl: 'region/',
      tbColumns: [
        { title: '名称', dataIndex: 'name', fixed: 'left', width: 200 },
        { title: '文件类型', dataIndex: 'dataTag', width: 100 },
        { title: '终端类型', dataIndex: 'terminalType.name', width: 100 },
        { title: '通讯协议', dataIndex: 'protocol.name', width: 180 },
        { title: '硬件版本', dataIndex: 'hardVer', width: 100 },
        { title: '软件版本', dataIndex: 'softVer', width: 100 },
        { title: '大小(B)', dataIndex: 'size', width: 100 },
        { title: '文件', dataIndex: 'file' }
      ],
      formRules: {
        name: [this.$formRules.nonNull],
        terminalType: [this.$formRules.nonNull],
        protocol: [this.$formRules.nonNull],
        vendor: [this.$formRules.nonNull]
      },
      terminalTypeList: Object.keys(this.$enum.TerminalType).map(key => this.$enum.TerminalType[key]),
      protocolTypeList: Object.keys(this.$enum.ProtocolType).map(key => this.$enum.ProtocolType[key]),
      vendorTypeList: Object.keys(this.$enum.VendorType).map(key => this.$enum.VendorType[key])
    };
  },

  mounted() {},

  methods: {}
};
</script>

<style lang="less" scoped>
</style>
